<template>
  <div class="container">
    <!-- 白色卡片 -->
    <p>张宁</p>

    <el-card class="box-card">
      <!-- 关键字输入框 -->
      <el-form label-width="80px" size="small ">
        <el-form-item label="关键字">
          <el-input
            v-model="data.keyword"
            placeholder="根据编号搜索"
          ></el-input>
        </el-form-item>
        <!-- 搜索按钮 -->
        <div class="but">
          <el-button size="mini" @click="onClear">清除</el-button>
          <el-button type="primary" size="mini" @click="onSearch"
            >搜索</el-button
          >
        </div>
      </el-form>
      <!-- 提示框 -->
      <el-alert :title="title" type="info" show-icon> </el-alert>
      <!-- 表格内容哦 -->
      <el-table :data="RandomsList" style="width: 100%">
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="questionType" label="题性" width="90">
          <template v-slot="{ row }">
            <div v-if="row.questionType === '1'">单选</div>
            <div v-else-if="row.questionType === '2'">多选</div>
            <div v-else>简答</div>
          </template>
        </el-table-column>
        <el-table-column label="题目编号">
          <template v-slot="{ row }">
            <div
              @click="onTopic(row.questionIDs[0].id)"
              :style="{ color: '#7f99ff' }"
              v-for="(item, index) in row.questionIDs"
              :key="index"
              class="serial"
            >
              {{ item.number }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间"> </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率（%）">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column width="80" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="onDdelete(row.id)"
              circle
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 翻页 -->
      <el-pagination
        :page-sizes="[5, 10, 20, 50]"
        :page-size="data.pagesize"
        :current-page="data.page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 题目编号的对话框 -->
    <el-dialog title="题目预览" :visible.sync="dialogTopic" width="50%">
      <TopicPreview :data="detail" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTopic = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TopicPreview from '@/module-hmmm/components/TopicPreview'
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
export default {
  components: {
    TopicPreview
  },
  data () {
    return {
      data: {
        page: 1,
        pagesize: 5,
        keyword: ''
      },
      RandomsList: [],
      total: 0,
      title: '0',
      dialogTopic: false,
      detail: {}
    }
  },
  created () {
    this.loadRandomsList()
  },
  methods: {
    // 点击清除
    onClear () {
      this.data.keyword = ''
      this.loadRandomsList()
    },
    // 点击搜索
    async onSearch () {
      this.loadRandomsList()
    },
    // 获取组题列表
    async loadRandomsList () {
      const res = await randoms(this.data)
      console.log(res)
      this.RandomsList = res.data.items
      this.total = res.data.counts
      this.title = '共有数据' + res.data.counts + '条'
    },
    // 点击删除
    async onDdelete (id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        await removeRandoms({ id })
        this.loadRandomsList()
      } catch (err) {
        this.$message({
          type: 'error',
          message: '删除失败!'
        })
      }
    },
    // 点击分页的页数
    handleCurrentChange (val) {
      console.log(val)
      this.data.page = val
      this.loadRandomsList()
    },
    handleSizeChange (val) {
      this.data.pagesize = val
    },
    // 点击题目编号
    async onTopic (id) {
      this.dialogTopic = true
      console.log(id)
      const res = await detail({ id })
      this.detail = res.data
      console.log(res)
    }
  }
}
</script>

<style scoped lang='less'>
// 白色卡片
.box-card {
  margin-bottom: 20px;
  // 关键字输入框
  /deep/.el-form {
    .el-form-item {
      float: left;
      .el-input__inner {
        width: 300px;
      }
    }
  }
  //  按钮
  .but {
    float: right;
  }
  //  翻页
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    font-weight: normal;
    /deep/.el-pagination__jump {
      margin-left: 0;
    }
  }
}
</style>
